<template>
  <v-chart :width="width" :height="height" :padding="[0]" :data="data" :scale="scale">
    <v-tooltip :show-title="false" />
    <v-coord type="rect" direction="TL" />
    <v-point position="x*y" color="category" shape="cloud" tooltip="value*category" />
  </v-chart>
</template>

<script>
import { registerShape } from 'viser-vue'
const DataSet = require('@antv/data-set')

const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png'

const scale = [
    { dataKey: 'x', nice: false },
    { dataKey: 'y', nice: false }
]

registerShape('point', 'cloud', {
    draw(cfg, container) {
        return container.addShape('text', {
            attrs: {
                fillOpacity: cfg.opacity,
                fontSize: cfg.origin._origin.size,
                rotate: cfg.origin._origin.rotate,
                text: cfg.origin._origin.text,
                textAlign: 'center',
                fontFamily: cfg.origin._origin.font,
                fill: cfg.color,
                textBaseline: 'Alphabetic',
                ...cfg.style,
                x: cfg.x,
                y: cfg.y
            }
        })
    }
})

export default {
    name: 'TagCloud',
    props: {
        tagList: {
            type: Array,
            required: true
        },
        height: {
            type: Number,
            default: 400
        },
        width: {
            type: Number,
            default: 640
        }
    },
    data() {
        return {
            data: [],
            scale
        }
    },
    watch: {
        tagList: function(val) {
            if (val.length > 0) {
                this.initTagCloud(val)
            }
        }
    },
    mounted() {
        if (this.tagList.length > 0) {
            this.initTagCloud(this.tagList)
        }
    },
    methods: {
        initTagCloud(dataSource) {
            const { height, width } = this

            const dv = new DataSet.View().source(dataSource)
            const range = dv.range('value')
            const min = range[0]
            const max = range[1]
            const imageMask = new Image()
            imageMask.crossOrigin = ''
            imageMask.src = imgUrl
            imageMask.onload = () => {
                dv.transform({
                    type: 'tag-cloud',
                    fields: ['name', 'value'],
                    size: [width, height],
                    imageMask,
                    font: 'Verdana',
                    padding: 0,
                    timeInterval: 5000, // max execute time
                    rotate() {
                        let random = ~~(Math.random() * 4) % 4
                        if (random === 2) {
                            random = 0
                        }
                        return random * 90 // 0, 90, 270
                    },
                    fontSize(d) {
                        if (d.value) {
                            return ((d.value - min) / (max - min)) * (32 - 8) + 8
                        }
                        return 0
                    }
                })
                this.data = dv.rows
            }
        }
    }
}
</script>
